<template>
  <page class="anency">
    <page-header>
      <x-header :left-options="{backText: ''}">{{title}}</x-header>
    </page-header>
    <page-content class="inner" :scroll="true" @refresh="refresh" @infinite="infinite">
      <loading v-if="empty" :loading="loading" :empty="empty"></loading>
      <div v-else>
        <card class="warning device-item" v-for="item in list" :key="item.id" @click.native="handleCardClick(item)">
          <card-header>
            <span slot="title">{{item['actAllot.allotNumber']}}</span>
            <span slot="text">{{item['actApply.actNode']}}</span>
          </card-header>
          <card-content>
            <div class="grid">
              <div class="grid-item h-full">
                <label class="label">申请单位</label>
                <span class="vlaue">{{item['actApply.office']}}</span>
              </div>
              <div class="grid-item h-full">
                <label class="label">申请人</label>
                <span class="vlaue">{{item['actApply.applyUser.name']}}</span>
              </div>
              <div class="grid-item h-full">
                <label class="label">工程项目</label>
                <span class="vlaue">{{item['actApply.warehouse.name']}}</span>
              </div>
              <div class="grid-item h-full">
                <label class="label">要求到货时间</label>
                <span class="vlaue">{{item['actApply.arriveTime'] | format('YYYY-MM-DD HH:mm')}}</span>
              </div>
              <div class="grid-item h-full">
                <label class="label">调拨单号</label>
                <span class="vlaue">{{item['actAllot.allotNumber']}}</span>
              </div>
            </div>
          </card-content>
        </card>
      </div>
    </page-content>
  </page>
</template>

<script>
import { mapGetters } from 'vuex'
import { XHeader } from 'vux'
import { actAllot } from '@service'

export default {
  name: 'ActAllotFinishList',
  components: {
    XHeader
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/info',
      token: 'user/token'
    }),
    userId () {
      return this.userInfo.id
    },
    title () {
      return '已办任务'
    },
    empty () {
      return this.list.length === 0
    }
  },
  data () {
    return {
      list: [],
      page: {
        count: '',
        pageNo: 1,
        pageSize: 10
      },
      loading: false
    }
  },
  methods: {
    async loadData () {
      try {
        let token = this.token
        let userId = this.userId
        let page = this.page
        let data
        this.loading = true
        data = await actAllot.finishData({ token, userId, ...page })
        console.log('======', data)
        this.list = data
        this.loading = false
      } catch (error) {
        console.log(error)
        this.loading = false
      }
    },
    async handleCardClick (item) {
      let id = item['actAllot.id']
      await this.$store.dispatch('task/updateTaskInfo', item)
      this.$router.push({
        path: '/apply/' + id,
        params: item
      })
    },
    async refresh () {
      await this.loadData()
    },
    // 上拉加载更多
    async infinite () {
      await this.loadData()
    }
  },
  created () {
    this.loadData()
  }
}
</script>

<style lang="scss" scoped>
.anency {
}
</style>
